<template>
	<view class="page">
		<view class="header">
			<wd-search
				v-model="searchContent"
				:maxlength="11"
				hide-cancel
				@change="onSearch"
				@clear="onClearSearch"
			/>

			<view class="options">
				<view class="btns-wrap">
					<wd-button size="small" :round="false" @tap="onCreateUser">
						添加用户
					</wd-button>
					<wd-button size="small" :round="false" type="success" @tap="onResetPassword">
						重置密码
					</wd-button>

					<!-- 根据选中的用户状态，显示禁用或启用按钮 -->
					<wd-button
						v-if="selectedUser?.isDisable"
						size="small"
						:round="false"
						type="success"
						@tap="onEnableUser"
					>
						启用用户
					</wd-button>
					<wd-button
						v-else
						size="small"
						:round="false"
						type="warning"
						@tap="onDisableUser"
					>
						禁用用户
					</wd-button>

					<wd-button size="small" :round="false" type="error" @tap="onDeleteUser">
						删除用户
					</wd-button>
				</view>
			</view>
		</view>

		<view class="table-wrapper">
			<wd-table :data="filteredUserList" :stripe="false" height="calc(100% - 130px)">
				<wd-table-col prop="name" label="选中" width="100rpx">
					<template #value="{ row }">
						<wd-checkbox v-model="row.selected" @change="handleChange(row)" />
					</template>
				</wd-table-col>
				<wd-table-col prop="name" label="姓名" width="150rpx"></wd-table-col>
				<wd-table-col prop="mobile" label="手机号" width="300rpx"></wd-table-col>
				<wd-table-col prop="isDisable" label="状态" width="124rpx">
					<template #value="{ row }">
						<text v-if="row.isDisable">禁用</text>
						<text v-else>正常</text>
					</template>
				</wd-table-col>
			</wd-table>
		</view>

		<!-- 添加用户弹窗 -->
		<wd-message-box selector="wd-message-box-slot">
			<wd-form ref="formRef" :model="formData">
				<wd-input
					v-model="formData.userName"
					prop="userName"
					label="姓名"
					label-width="60px"
					clearable
					placeholder=""
					:rules="[{ required: true, message: '请填写用户名' }]"
				/>
				<wd-input
					v-model="formData.mobile"
					prop="mobile"
					label="手机号"
					label-width="60px"
					clearable
					placeholder=""
					:rules="[
						{ required: true, message: '请填写手机号' },
						{ required: true, pattern: /^1\d{10}$/, message: '手机号格式错误' },
					]"
				/>
			</wd-form>
		</wd-message-box>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { useMessage } from '@/uni_modules/wot-design-uni';

import { useController } from './controller';
import { showSuccessToast } from '../../utils/toast.utils';
import { showDialog } from '../../hooks/useConfirm';

const formRef = ref();
const message = useMessage('wd-message-box-slot');
const { formData, searchContent, userList, filteredUserList, selectedUser, ...ctl } =
	useController();

// 搜索
const onSearch = () => {
	ctl.search();
};

// 清空搜索
const onClearSearch = () => {
	ctl.clearSearch();
};

// 选中用户
const handleChange = (user) => {
	console.log('选中用户', user);
	selectedUser.value = user;
	// 单选
	filteredUserList.value = filteredUserList.value.map((e) => {
		if (e.id === user.id) return user;
		e.selected = false;
		return e;
	});
};

// 添加用户弹窗
const onCreateUser = () => {
	message
		.confirm({
			title: '添加用户',
			closeOnClickModal: false,
			beforeConfirm: async ({ resolve }) => {
				const { valid } = await formRef.value?.validate();
				if (valid) resolve(valid);
			},
		})
		.then(async () => {
			await ctl.createUser();
			showSuccessToast();
		})
		.catch((error) => {
			console.log(error);
		});
};
// 重置用户密码
const onResetPassword = async () => {
	await ctl.resetPassword();
	showSuccessToast();
};

// 启用用户
const onEnableUser = async () => {
	await ctl.switchUserStatus();
	showSuccessToast();
};
// 禁用用户
const onDisableUser = async () => {
	await ctl.switchUserStatus();
	showSuccessToast();
};

// 删除用户
const onDeleteUser = async () => {
	ctl.checkSelected();
	const confirm = await showDialog({
		title: '删除用户',
		content: `确定要删除${selectedUser.value.name}吗`,
	});
	if (!confirm) return;

	await ctl.deleteUser();
	showSuccessToast();
};
</script>

<style scoped>
.page {
	width: 100%;
	height: 100%;
}

.header {
	height: 110px;
	padding-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.btns-wrap {
	display: flex;
	justify-content: space-between;
	padding: 0 36rpx;
}

.table-wrapper {
	padding: 0 36rpx;
}
</style>
